<template>
  <div>
    <!-- <Hello :onDelete="onDelete"></Hello> -->
    <!-- <el-input v-model="address" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="serarchItems" round>搜索</el-button>
    <el-table :data="persons" border>
        <el-table-column prop="id" label="序号">
        </el-table-column>
        <el-table-column prop="login" label="登录名">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="deleteClick(scope.row)" type="text" size="small">编辑</el-button>
            </template>
</el-table-column>
</el-table> -->
    <button @click="test">测试</button>
    <input type="text" v-model.number="n" />
    {{ bigSum }}
    {{ sum }}
    <button @click="changeHot">改变</button>
    <Caodan></Caodan>
    <WorldHello />
  </div>
</template>

<script>
  import { send } from '@/utils/student.js';
  import Hello from '../components/Hello.vue';
  import Caodan from '@/components/Caodan.vue';
  import WorldHello from '@/components/WorldHello.vue';
  import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';

  export default {
    name: 'Wrold',
    components: {
      Hello,
      Caodan,
      WorldHello,
    },
    data() {
      return {
        address: '',
        persons: [],
        userName: 'caoda',
        password: '1122423',
        n: 0,
        isHot: true,
      };
    },
    methods: {
      changeHot() {
        // this.isHot = !this.isHot
        this.persons.unshift({ id: '1001', name: 'cd', age: 20 });
      },
      ...mapActions({ add: 'jia' }),
      ...mapMutations({ addd: 'JIA' }),
      async serarchItems() {
        if (!this.address) this.$message.error('输入内容为空');
        else {
          // 发送请求
          const res = await send(this.address);
          console.log(res);
          this.persons = res.items;
        }
      },
      handleClick(row) {
        console.log(row);
      },
      deleteClick(row) {
        console.log(row);
      },
      onDelete() {
        console.log('delete');
      },
      test() {
        // console.log('hello')
        // this.$bus.$emit('hello', 'hahaha')
        // const full = this.userName + this.password
        // console.log(full)
        // const res = {
        //     ...this.data,
        //     full
        // }
        // this.$store.dispatch('jia', this.n)
        this.addd(this.n);
      },
    },
    watch: {
      isHot: {
        handler(newValue, oldValue) {
          console.log(newValue, oldValue);
        },
      },
      persons: {
        deep: true,
        handler(newValue, oldValue) {
          console.log(newValue, oldValue);
        },
      },
    },
    computed: {
      ...mapState(['sum']),
      // 计算属性
      ...mapGetters(['bigSum']),
    },
  };
</script>

<style scoped></style>
